<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选项卡组件</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            neutral: '#F2F3F5',
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .tab-active {
        @apply text-primary border-primary font-medium;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .tab-transition {
        @apply transition-all duration-300 ease-in-out;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- 水平选项卡 -->
    <section class="mb-12 bg-white rounded-xl shadow-sm p-6">
      <div class="relative">
        <div id="horizontalTabs" class="flex space-x-1 overflow-x-auto pb-2 scrollbar-hide tab-transition">
          <!-- 水平选项卡项 -->
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg tab-active">首页</button>
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg">产品中心</button>
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg">解决方案</button>
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg">案例展示</button>
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg">新闻动态</button>
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg">关于我们</button>
          <button class="tab-transition whitespace-nowrap px-4 py-2 border-b-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-t-lg">联系我们</button>
        </div>
      </div>
      
      <div id="horizontalTabContent" class="mt-6 p-4 bg-gray-50 rounded-lg min-h-[200px]">
        <h3 class="text-lg font-medium mb-2">首页</h3>
        <p class="text-gray-600">这是首页的内容区域。</p>
      </div>
    </section>

    <!-- 竖直选项卡 -->
    <section class="bg-white rounded-xl shadow-sm p-6">
      <div class="flex flex-col md:flex-row gap-6">
        <div class="w-full md:w-64 h-64 md:h-auto overflow-y-auto scrollbar-hide tab-transition">
          <div id="verticalTabs" class="flex flex-col space-y-1">
            <!-- 竖直选项卡项 -->
            <button class="tab-transition px-4 py-3 border-l-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-l-lg tab-active">个人信息</button>
            <button class="tab-transition px-4 py-3 border-l-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-l-lg">账户安全</button>
            <button class="tab-transition px-4 py-3 border-l-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-l-lg">通知设置</button>
            <button class="tab-transition px-4 py-3 border-l-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-l-lg">隐私设置</button>
            <button class="tab-transition px-4 py-3 border-l-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-l-lg">应用管理</button>
            <button class="tab-transition px-4 py-3 border-l-2 border-transparent text-gray-600 hover:text-primary hover:bg-gray-50 rounded-l-lg">数据同步</button>
          </div>
        </div>
        
        <div id="verticalTabContent" class="flex-1 p-4 bg-gray-50 rounded-lg min-h-[200px]">
          <h3 class="text-lg font-medium mb-2">个人信息</h3>
          <p class="text-gray-600">这是个人信息的内容区域。</p>
        </div>
      </div>
    </section>
  </div>

  <script>
    // 水平选项卡点击事件
    document.querySelectorAll('#horizontalTabs button').forEach(tab => {
      tab.addEventListener('click', () => {
        document.querySelectorAll('#horizontalTabs button').forEach(t => {
          t.classList.remove('tab-active');
        });
        tab.classList.add('tab-active');
        
        document.getElementById('horizontalTabContent').innerHTML = `
          <h3 class="text-lg font-medium mb-2">${tab.textContent.trim()}</h3>
          <p class="text-gray-600">这是${tab.textContent.trim()}的内容区域。</p>
        `;
      });
    });

    // 竖直选项卡点击事件
    document.querySelectorAll('#verticalTabs button').forEach(tab => {
      tab.addEventListener('click', () => {
        document.querySelectorAll('#verticalTabs button').forEach(t => {
          t.classList.remove('tab-active');
        });
        tab.classList.add('tab-active');
        
        document.getElementById('verticalTabContent').innerHTML = `
          <h3 class="text-lg font-medium mb-2">${tab.textContent.trim()}</h3>
          <p class="text-gray-600">这是${tab.textContent.trim()}的内容区域。</p>
        `;
      });
    });
  </script>
</body>
</html>
    